<!-- 学位调剂 -->
<template>
  <ScreenAdapter>
    <!--  百度地图背景  -->
    <bMap v-if="pointArr.length === 0"></bMap>
    <bMap v-else :centerPoint="centerPoint" :point="pointArr" :polygon="polygon" :polygonColor="polygonColor" :clearOverlays="clearOverlays" @onMarkerClick="onMarkerClick">
      <el-bmapv-view>
        <el-bmapv-fly-line-layer color="#E93027" :texture-color="'#E93027'" :texture-width="20" :data="data"></el-bmapv-fly-line-layer>
      </el-bmapv-view>
    </bMap>
    <!--  顶部标题栏  -->
    <div class="container_top-xwtj">
      <div class="topleft">
        <p @click="$router.push('/xuequfenxi')">学区分析</p>
        <p @click="$router.push('/yubaom')">预报名分析</p>
        <p @click="$router.push('/shishibaoming')">实时报名</p>
        <p class="active">学位调剂</p>
      </div>
      <p>{{ cityname }}.学位调剂</p>
      <div class="topright">
        <div>
          统计时间：
          <el-select style="width: 132px; z-index: 9; position: relative" v-model="localYear" @change="onSelectChange">
            <el-option
              v-for="item in yearList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              class="selectbox"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <!--  左侧图表  -->
    <div class="sidebox-xwtj left-xwtj">
      <div class="maintitle"><p>各类别录取率</p></div>
      <div class="mainbox">
        <div class="flexbetween popcircle" style="margin-bottom:10px; margin-top:15px;">
          <div class="yzjzbox" style="width:30%;position: relative; height:190px;" v-for="(item,index) in luqudata" :key="index">
            <v-chart :option="getBarOption('chartpie2'+index)" style="width:100%; height:130px"></v-chart>
            <div class="yzjzcircle1"></div>
            <p>{{ item.name }}&nbsp;-录取率</p>
          </div>
        </div>
      </div>
      <div class="maintitle"><p>学校待调剂信息</p></div>
      <div class="mainbox" style="height: 650px;">
        <div class="mainbox_content">
          <div class="flexbetween">
<!--            <div :class="index===xuexiaotype?'xuexiaolistbox active':'xuexiaolistbox'" v-for="(item,index) in xuexiaodata" :key="index" @click="changeInfo(index)">-->
<!--              <p>{{ item.name }}</p>-->
<!--            </div>-->
          </div>
          <div class="wrap-table head" style="margin-top:20px;">
            <table style="border-spacing: 0">
              <colgroup>
                <col style="width: 10%"/>
                <col style="width: 35%"/>
                <col style="width: 35%"/>
                <col style="width: 20%"/>
              </colgroup>
              <thead>
              <tr>
                <th>排名</th>
                <th>乡镇街道</th>
                <th>学校名称</th>
                <th>待调剂人数</th>
              </tr>
              </thead>
            </table>
          </div>
          <div class="wrap-table body" style="height: 520px; overflow: auto">
            <table style="border-spacing: 0">
              <colgroup>
                <col style="width: 10%"/>
                <col style="width: 35%"/>
                <col style="width: 35%"/>
                <col style="width: 20%"/>
              </colgroup>
              <tr v-for="(item,index) in dtj" :key="index" style="cursor: pointer"
                  @click="showInfo(item.name)">
                <td><p :class="index<1?'sortN'+index : ''">{{ (index + 1) }}</p>
                <td><p>{{ item.city }}</p>
                </td>
                <td>
                  <p>{{ item.name }}</p>
                </td>
                <td>{{ item.value }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!--  中部图表  -->
    <div class="midbox-xwtj">
      <div class="flexbetween midtopbox">
        <div class="midtjbox1  midtj0">
          <div class="flexbetween">
            <div class="midtopcontent">
              <p class="normaltxt"><span class="lightblue2" style="padding-left:0">{{ middata.tiaoji }}</span></p>
              <p class="normaltxt">待调剂学生 (人)</p>
            </div>
            <div class="midtopcontent">
              <p class="normaltxt"><span class="keyyellow2" style="padding-left:0">{{ middata.kongyu }}</span></p>
              <p class="normaltxt">空余学位 (个)</p>
            </div>
          </div>
        </div>
        <div class="midtjbox1" style="flex:1;">
          <div class="flexbox progressbox1">
            <div v-for="(item,index) in middata.tiaojidata" :key="index"
                 :class="'progresscurbox progresscurbox'+index" :style="{'width':item.percent+'%'}"></div>
          </div>
          <div class="flexbetween">
            <div :class="'tjlist tjlist'+index" v-for="(item,index) in middata.tiaojidata" :key="index">
              <p class="normaltxt">{{ item.name }}调剂人数 (人数)</p>
              <p class="normaltxt"> <span class="keyblue" style="padding-left: 15px;">{{ item.value }}</span><span>{{ item.percent }}%</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="flexbetween" style="margin-top:10px;">
        <div class="mapname"><p>{{ mapname }}</p></div>
<!--        <div class="mapcontrolbox">-->
<!--          <p :class="mapcontrol===0?'red active':'red'" @click="mapcontrol=1">需调剂</p>-->
<!--          <p :class="mapcontrol===1?'green active':'green'" @click="mapcontrol=2">空缺</p>-->
<!--        </div>-->
<!--        <div class="flexbox mapcontrolbox">-->
<!--          <p :class="kuoban?'kuoban kuoban1':'kuoban'" @click="kuoban=!kuoban">扩班</p>-->
<!--          <p :class="youxian===0?'blue active':'blue'" @click="youxian=0">综合优先</p>-->
<!--          <p :class="youxian===1?'blue active':'blue'" @click="youxian=1">房产优先</p>-->
<!--          <p :class="youxian===2?'blue active':'blue'" @click="youxian=2">户籍优先</p>-->
<!--          <p class="normalbutton">调剂</p>-->
<!--        </div>-->
      </div>
    </div>
    <!--  底部操作  -->
    <div class="bottom-xwtj">
      <!--      <div class="mapbigbox">-->
      <!--        <div>-->
      <!--          <p>+</p>-->
      <!--          <p>-</p>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="schoolcontrolbox school0" v-if="schoolcontrol===null">
        <p @click="onBottomClick(2)">只看小学</p>
        <p class="active">全部学校</p>
        <p @click="onBottomClick(3)">只看初中</p>
      </div>
      <div class="schoolcontrolbox school1" v-if="schoolcontrol===2">
        <p class="active">只看小学</p>
        <p @click="onBottomClick(null)">全部学校</p>
        <p @click="onBottomClick(3)">只看初中</p>
      </div>
      <div class="schoolcontrolbox school2" v-if="schoolcontrol===3">
        <p @click="onBottomClick(2)">只看小学</p>
        <p @click="onBottomClick(null)">全部学校</p>
        <p class="active">只看初中</p>
      </div>
    </div>
    <!--  右侧图表  -->
    <div class="sidebox-xwtj right-xwtj">
      <div class="maintitle"><p>学校调剂信息</p></div>
      <div class="mainbox" style="height:960px;margin-top: 20px">
        <div class="mainbox_content">
          <div class="flexbetween" style="margin-top:10px;">
            <el-input v-model="searchtxt" placeholder="请输入关键字（学校名称）" style="width:330px; margin-left: 10px;"></el-input>
            <el-button class="btn" @click="renovateData">搜索</el-button>
          </div>
          <div class="wrap-table head" style="margin-top:10px;">
            <table style="border-spacing: 0">
              <colgroup>
                <col style="width: 10%"/>
                <col style="width: 35%"/>
                <col style="width: 35%"/>
                <col style="width: 20%"/>
              </colgroup>
              <thead>
              <tr>
                <th>排名</th>
                <th>调出学校名称</th>
                <th>调入学校名称</th>
                <th>调剂人数</th>
              </tr>
              </thead>
            </table>
          </div>
          <div class="wrap-table body" style="min-height: 400px; max-height: 600px; overflow: auto">
            <table style="border-spacing: 0">
              <colgroup>
                <col style="width: 10%"/>
                <col style="width: 35%"/>
                <col style="width: 35%"/>
                <col style="width: 20%"/>
              </colgroup>
              <tr v-for="(item,index) in schooldata" :key="index" style="cursor: pointer">
                <td><p :class="index<1?'yellowkey': ''">{{ (index + 1) }}</p>
                <td @click="$router.push({path: '/xuexiao',query: {schoolId: item.fromSchoolId}})">
                  <p>{{ item.from }}</p>
                </td>
                <td @click="$router.push({path: '/xuexiao',query: {schoolId: item.toSchoolId}})">
                  <p>{{ item.to }}</p>
                </td>
                <td>{{ item.value }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!--  学校画像  -->
    <div class="infobox" v-if="viewinfo">
      <div class="infobox_top">
      </div>
      <div class="infobox_body">
        <div class="poptitlebox">
          <div class="flexbox">
            <p class="poptype">{{ schoolinfo.type }}</p>
            <p class="poptitle">{{ schoolinfo.name }}</p>
            <p class="topopinfo" style="cursor: pointer" @click="$router.push('/xuexiao')">详情</p>
          </div>
          <p>学校地址：{{ schoolinfo.address }}</p>
        </div>
        <div class="flexwrap">
          <div :class="'listbox listbox2'+index" v-for="(item,index) in schoolinfo.moredata" :key="index">
            <p class="listval">{{ item.value }}</p>
            <p class="listname">{{ item.name }}</p>
          </div>
        </div>
        <div class="subtitle"><p>待调剂学生信息</p></div>
        <div class="wrap-table head">
          <table style="border-spacing: 0">
            <colgroup>
              <col style="width: 10%"/>
              <col style="width: 20%"/>
              <col style="width: 10%"/>
              <col style="width: 30%"/>
              <col style="width: 30%"/>
            </colgroup>
            <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>类型</th>
              <th>可调学校</th>
              <th>调剂依据</th>
            </tr>
            </thead>
          </table>
        </div>
        <div class="wrap-table body" style="min-height: 400px; max-height: 600px; overflow: auto">
          <table style="border-spacing: 0">
            <colgroup>
              <col style="width: 10%"/>
              <col style="width: 20%"/>
              <col style="width: 10%"/>
              <col style="width: 30%"/>
              <col style="width: 30%"/>
            </colgroup>
            <tr v-for="(item,index) in schoolinfo.data" :key="index" style="cursor: pointer"
                @click="$router.push('/xuesheng')">
              <td><p :class="index<1?'yellowkey': ''">{{ (index + 1) }}</p>
              <td>{{ item.name }}
              </td>
              <td>
                <div>{{ item.type }}</div>
              </td>
              <td>
                <p> {{ item.schoolname }}</p>
              </td>
              <td><p>{{ item.content }}</p></td>
            </tr>
          </table>
        </div>
      </div>
      <div class="infobox_bottom"></div>
    </div>
    <div class="popbox" v-if="mappopview">
      <div class="popbox_content">
        <div class="poptitlebox">
          <div class="flexbox">
            <p class="poptype">{{ popdata.type }}</p>
            <p class="poptitle">{{ popdata.name }}</p>
            <p class="topopinfo" style="cursor: pointer" @click="getData2()">详情</p>
          </div>
          <p>学校地址：{{ popdata.address }}</p>
        </div>
        <div class="flexbetween">
          <div class="tjbox1">
            <p class="tjval normaltxt"><span class="keyblue">{{ popdata.jihua }}</span></p>
            <p>计划招生 人</p>
            <p class="normaltxt">同比增加<span class="keyyellow up">{{ popdata.jihuaadd }}%</span></p>
          </div>
          <div class="flexlist" style="height:146px; flex:1; margin-left: 10px; ">
            <div class="tjbox2" v-for="(item,index) in popdata.infodata" :key="index">
              <p style="width:6em;">{{ item.name }}人数</p>
              <p><span>{{ item.value }} <b>人</b></span></p>
            </div>
          </div>
        </div>
        <div class="yzjzbox" style="width:100%;position: relative;">
          <v-chart :option="chartpie2" style="width:100%; height:190px"></v-chart>
          <div class="yzjzcircle"></div>
        </div>
        <p class="popboxtitle">近五年各类别招生情况</p>
        <v-chart :option="chartBar" style="width:100%; height:130px"></v-chart>
        <p class="popboxtitle">各类别报名录取率</p>
        <div class="flexbetween popcircle" style="margin-bottom:10px;">
          <div class="yzjzbox" style="width:25%;position: relative; height:90px;">
            <v-chart :option="chartpie30" style="width:100%; height:90px"></v-chart>
            <div class="yzjzcircle2"></div>
            <p>{{ popdata.piedata2[0].name }}</p>
          </div>
          <div class="yzjzbox" style="width:25%;position: relative; height:90px;">
            <v-chart :option="chartpie31" style="width:100%; height:90px"></v-chart>
            <div class="yzjzcircle2"></div>
            <p>{{ popdata.piedata2[1].name }}</p>
          </div>
          <div class="yzjzbox" style="width:25%;position: relative; height:90px;">
            <v-chart :option="chartpie32" style="width:100%; height:90px"></v-chart>
            <div class="yzjzcircle2"></div>
            <p>{{ popdata.piedata2[2].name }}</p>
          </div>
          <div class="yzjzbox" style="width:25%;position: relative; height:90px;">
            <v-chart :option="chartpie33" style="width:100%; height:90px"></v-chart>
            <div class="yzjzcircle2"></div>
            <p>{{ popdata.piedata2[3].name }}</p>
          </div>
        </div>
      </div>
    </div>
  </ScreenAdapter>
</template>

<script>
import autoPage from '../utils/autoPage'
import VChart from 'vue-echarts'
import rollNum from '../components/rollNum'
import bMap from '../components/bMap'
import ScreenAdapter from '../components/ScreenAdapter'
const echarts = require('echarts')

export default {
  name: 'yubaom',
  components: {
    VChart,
    rollNum,
    ScreenAdapter,
    bMap
  },
  extends: autoPage,
  data () {
    return {
      data: [{
        geometry: {
          type: 'LineString',
          coordinates: [
            [120.32070782010605, 29.15341290539365],
            [120.24464, 29.271818]
          ]
        },
        properties: {}
      }],
      // 是否清除所有覆盖物
      clearOverlays: {
        flag: false
      },
      // 是否存在下一页数据
      hasNextPage: true,
      // 实时页码
      pageNum: 0,
      bMap: null,
      // 颜色索引
      colorIndex: -1,
      // 覆盖物颜色
      polygonColor: '',
      // 地图显示标志
      showMap: false,
      // 地图中心坐标
      centerPoint: {},
      // 学校地图坐标
      pointArr: [],
      // 学校范围坐标组
      polygon: [],
      cityname: '东阳市',
      localYear: new Date().getFullYear(),
      yearList: [
        {label: '2022年', value: '2022'},
        {label: '2021年', value: '2021'},
        {label: '2020年', value: '2020'},
        {label: '2019年', value: '2019'},
        {label: '2018年', value: '2018'}
      ],
      luqudata: [ // 各类别录取率
        // {name: 'A类', value: 98, value2: 9500},
        // {name: 'B类', value: 85, value2: 8500},
        // {name: 'C类', value: 50, value2: 4500}
      ],
      middata: {
        tiaoji: 10900, // 待调剂学生数
        kongyu: 5600, // 空余学位
        tiaojidata: [ // 调剂数据对比
          // {name: '小学', value: 1456, percent: 65, unit: '人'},
          // {name: '中学', value: 456, percent: 35, unit: '个'}
        ]
      },
      searchtxt: '', // 地图搜索
      localcity: '', // 选择的乡镇街道
      mapname: '东阳市',
      mappopview: false,
      mapcontrol: 0, // 地图筛选控制，0:需调剂1：空缺
      kuoban: false, // 扩班否
      youxian: 0, // 优先，0综合优先1房产 优先2户籍优先
      schoolcontrol: null, // 学校筛选控制，null：全部，1：小学，2：初中
      xuexiaotype: 0, // 学校类别
      sorttype: 0, // 排名类别，0综合优先，1户籍优先，2房产优先
      sortdata: ['综合优先', '户籍优先', '房产优先'], // 排名列表
      viewinfo: false, // 查看学校报名详情控制
      schooldata: [],
      schoolinfo: {
        name: '某某某某某学校',
        address: '浙江省金华市东阳市吴宁街道某某某路123号',
        type: '公办',
        moredata: [
          {name: '已录取人数', value: 1233},
          {name: '招生计划数', value: 2365},
          {name: '待调剂人数', value: 3652},
          {name: '空余学位数', value: 200}
        ],
        data: [
          {name: '上官飘飘', type: 'A类', schoolname: '某某中心学校', content: '学区房'}
        ]
      },
      // 学校待调剂信息
      dtj: [],
      xuexiaodata: [ // 学校预报名信息
      ],
      popdata: {
        schoolId: '',
        name: '某某某某某某学校', // 学校名称
        type: '公办',
        address: '浙江省金华市东阳市某某路123号', // 地址
        jihua: 12234, // 计划招生人数
        jihuaadd: 23, // 计划招生增加
        infodata: [
        ],
        piedata: [ // 预报名类别占比
        ],
        bardata: [],
        piedata2: []
      }
    }
  },
  computed: {
    // chartLine () {
    //   let data = this.linedata
    //   let color = ['rgba(83,226,255', 'rgba(255,185,54', 'rgba(255, 160, 10, 1)']
    //   return {
    //     color: color,
    //     legend: {
    //       show: true,
    //       left: 'right',
    //       top: 10,
    //       itemGap: 25,
    //       icon: 'rect',
    //       itemWidth: 8,
    //       itemHeight: 8,
    //       padding: [0, 15, 0, 0],
    //       textStyle: {
    //         fontSize: 12,
    //         color: 'rgba(255,255,255,0.72)'
    //       }
    //     },
    //     tooltip: {
    //       trigger: 'axis',
    //       backgroundColor: 'rgba(3,32,64,0.80)',
    //       borderColor: '#3D5267',
    //       textStyle: {
    //         fontSize: 12,
    //         color: '#fff',
    //         fontStyle: 'normal',
    //         fontWeight: 'normal'
    //       }
    //     },
    //     textStyle: {
    //       fontFamily: 'Microsoft YaHei',
    //       fontSize: 12,
    //       color: '#fff',
    //       fontStyle: 'normal',
    //       fontWeight: 'normal'
    //     },
    //     grid: [
    //       {
    //         left: '4%',
    //         right: '4%',
    //         top: '20%',
    //         bottom: '8%',
    //         containLabel: true
    //       }
    //     ],
    //     xAxis: {
    //       type: 'category',
    //       // name: '类型',
    //       // nameLocation: 'start',
    //       // nameGap: 8,
    //       // nameTextStyle: {
    //       //   color: 'rgba(255,255,255,0.72)',
    //       //   verticalAlign: '0',
    //       //   fontSize: 16,
    //       //   padding: [12, 0, -22, 0]
    //       //
    //       // },
    //       axisTick: false,
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: '#3D5267',
    //           width: 1,
    //           type: 'dashed'
    //         }
    //       },
    //       axisLabel: {
    //         margin: 10,
    //         textStyle: {
    //           fontSize: 12,
    //           color: 'rgba(255,255,255,0.72)'
    //         }
    //       }
    //     },
    //     yAxis: [{
    //       type: 'value',
    //       name: '单位：万次',
    //       nameTextStyle: {
    //         color: 'rgba(255,255,255,0.72)',
    //         fontSize: 12
    //       },
    //       splitNumber: 3,
    //       axisLine: {
    //         show: false,
    //         lineStyle: {
    //           color: 'rgba(255,255,255,0.16)',
    //           width: 1
    //         }
    //       },
    //       splitLine: {
    //         show: true,
    //         lineStyle: {
    //           color: 'rgba(255,255,255,0.16)',
    //           width: 1,
    //           type: 'dashed'
    //         }
    //       },
    //       axisLabel: {
    //         textStyle: {
    //           fontSize: 12,
    //           color: 'rgba(255,255,255,0.72)'
    //         }
    //       }
    //     }],
    //     series: data.map((item, index) => {
    //       return {
    //         name: item.name,
    //         type: 'line',
    //         data: item.value.map(itm => [itm.name, itm.value ? itm.value : '']),
    //         itemStyle: {
    //           color: color[index] + ',1)'
    //
    //         },
    //         areaStyle: {
    //           color: {
    //             type: 'linear',
    //             x: 0,
    //             y: 0,
    //             x2: 0,
    //             y2: 1,
    //             colorStops: [
    //               {
    //                 offset: 0,
    //                 color: color[index] + ',0.5)'
    //               },
    //               {
    //                 offset: 1,
    //                 color: color[index] + ', 0)'
    //               }
    //             ],
    //             global: false
    //           }
    //         }
    //
    //       }
    //     })
    //   }
    // },
    chartpie2 () {
      let data = this.popdata.piedata
      let color = ['#077CDC', '#04C1FF', '#46C88C', '#FFB936', '#F78FFF', '#6F8CFF']
      let objData = this.array2obj(data, 'name')
      let sum = 0
      data.map(item => {
        sum += Number(item.value)
      })
      sum = parseFloat(sum).toFixed(2)
      return {
        title: {
          text: '{name|预报名\n类别占比}',
          textAlign: 'center',
          left: '21%',
          top: '33%',
          textStyle: {
            rich: {
              name: {
                color: '#fff',
                fontSize: 14
              },
              value: {
                height: 20,
                color: '#fff',
                fontSize: 18,
                fontFamily: 'DINPro-Medium'
              },
              unit: {
                fontSize: 14,
                color: 'rgba(255,255,255,0.72)'
              }
            }
          }
        },
        legend: {
          top: '13%',
          left: '50%',
          itemWidth: 8,
          itemHeight: 8,
          icon: 'rect',
          data: data,
          itemGap: 15,
          orient: 'vertical',
          formatter: function (name) {
            let percent = ((objData[name].value / sum) * 100).toFixed(2)
            return '{title|' + name + ':}{value|' + objData[name].value + '}{unit|' + percent + '%}'
          },
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,.8)',
            rich: {
              title: {
                fontSize: 14,
                color: 'rgba(255,255,255,1)',
                padding: [0, 10, 0, 0]
              },
              value: {
                fontSize: 16,
                color: '#53E2FF',
                align: 'left',
                padding: [0, 0, 0, 10]
              },
              unit: {
                fontSize: 16,
                color: 'rgba(255,255,255,0.72)',
                padding: [0, 0, 0, 10]
              }
            }
          }
        },
        series: [{
          type: 'pie',
          center: ['23.5%', '47%'],
          radius: ['65%', '84%'],
          itemStyle: {
            color: params => color[params.dataIndex]
          },
          labelLine: {
            show: false
          },
          label: {
            show: false,
            position: 'center',
            fontSize: 14,
            lineHeight: 28,
            color: 'rgba(255,255,255,0.8)',
            formatter: params => {
              return `{per| ${params.percent}%}\n{name|${params.name}}`
            },
            rich: {
              name: {
                fontSize: 16,
                color: 'rgba(255,255,255,0.88)'
              },
              per: {
                fontSize: 20,
                color: '#fff',
                fontWeight: 'bold',
                fontFamily: 'DINPro-Medium'
              }
            }
          },
          z: 3,
          data: data.map(item => {
            return {
              ...item
              // emphasis: {
              //   label: {
              //     show: true
              //   }
              // }
            }
          })
        }]
      }
    },
    chartBar () {
      let data = this.popdata.bardata
      let color = ['#077CDC', '#04C1FF', '#46C88C', '#FFB936']
      return {
        color: color,
        legend: {
          show: true,
          left: 'right',
          top: 10,
          itemGap: 25,
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          padding: [0, 15, 0, 0],
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,0.72)'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(3,32,64,0.80)',
          borderColor: '#3D5267',
          textStyle: {
            fontSize: 12,
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal'
          }
        },
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          fontSize: 12,
          color: '#fff',
          fontStyle: 'normal',
          fontWeight: 'normal'
        },
        grid: [
          {
            left: '4%',
            right: '4%',
            top: '25%',
            bottom: '8%',
            containLabel: true
          }
        ],
        xAxis: {
          type: 'category',
          // name: '类型',
          // nameLocation: 'start',
          // nameGap: 8,
          // nameTextStyle: {
          //   color: 'rgba(255,255,255,0.72)',
          //   verticalAlign: '0',
          //   fontSize: 16,
          //   padding: [12, 0, -22, 0]
          //
          // },
          axisTick: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#3D5267',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        },
        yAxis: [{
          type: 'value',
          name: '单位：万人',
          nameTextStyle: {
            color: 'rgba(255,255,255,0.72)',
            fontSize: 12
          },
          splitNumber: 3,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        }],
        series: data.map((item) => {
          return {
            name: item.name,
            type: 'bar',
            data: item.value.map(itm => [itm.name, itm.value ? itm.value : '']),
            barWidth: 4

          }
        })
      }
    },
    chartpie20 () {
      let data = this.luqudata[0]
      return {
        series: [
          {
            name: data.name,
            type: 'pie',
            clockWise: false,
            radius: ['68%', '85%'],
            itemStyle: {
              normal: {
                color: '#04C1FF',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data.value,
              label: {
                formatter: '{value|' + data.value + '%}',
                position: 'center',
                padding: [5, 0, 0, 0],
                show: true,
                textStyle: {
                  fontSize: 20,
                  color: '#53E2FF', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: '#043c70'
                }

              }
            }]
          }
          // {
          //   name: '',
          //   type: 'pie',
          //   clockWise: false,
          //   radius: ['70%', '85%'],
          //   center: ['50%', '50%'],
          //   itemStyle: {
          //     normal: {
          //       color: '#043c70',
          //       label: {
          //         show: false
          //       },
          //       labelLine: {
          //         show: false
          //       }
          //     }
          //   },
          //   data: [100],
          //   z: 0
          // }
        ]
      }
    },
    chartpie21 () {
      let data = this.luqudata[1]
      return {
        series: [
          {
            name: data.name,
            type: 'pie',
            clockWise: false,
            radius: ['68%', '85%'],
            itemStyle: {
              normal: {
                color: '#46C88C',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data.value,
              label: {
                formatter: '{value|' + data.value + '%}',
                position: 'center',
                padding: [5, 0, 0, 0],
                show: true,
                textStyle: {
                  fontSize: 16,
                  color: '#53E2FF', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: '#043c70'
                }

              }
            }]
          }
          // {
          //   name: '',
          //   type: 'pie',
          //   clockWise: false,
          //   radius: ['70%', '85%'],
          //   center: ['50%', '50%'],
          //   itemStyle: {
          //     normal: {
          //       color: '#043c70',
          //       label: {
          //         show: false
          //       },
          //       labelLine: {
          //         show: false
          //       }
          //     }
          //   },
          //   data: [100],
          //   z: 0
          // }
        ]
      }
    },
    chartpie22 () {
      let data = this.luqudata[2]
      return {
        series: [
          {
            name: data.name,
            type: 'pie',
            clockWise: false,
            radius: ['68%', '85%'],
            itemStyle: {
              normal: {
                color: '#FFB936',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data.value,
              label: {
                formatter: '{value|' + data.value + '%}',
                position: 'center',
                padding: [5, 0, 0, 0],
                show: true,
                textStyle: {
                  fontSize: 16,
                  color: '#53E2FF', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: '#043c70'
                }

              }
            }]
          }
          // {
          //   name: '',
          //   type: 'pie',
          //   clockWise: false,
          //   radius: ['70%', '85%'],
          //   center: ['50%', '50%'],
          //   itemStyle: {
          //     normal: {
          //       color: '#043c70',
          //       label: {
          //         show: false
          //       },
          //       labelLine: {
          //         show: false
          //       }
          //     }
          //   },
          //   data: [100],
          //   z: 0
          // }
        ]
      }
    },
    chartpie30 () {
      let data = this.popdata.piedata2[0]
      return {
        series: [
          {
            name: data.name,
            type: 'pie',
            clockWise: false,
            radius: ['70%', '85%'],
            itemStyle: {
              normal: {
                color: '#077CDC',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data.value,
              label: {
                formatter: '{value|{c}%}',
                position: 'center',
                padding: [5, 0, 0, 0],
                show: true,
                textStyle: {
                  fontSize: 16,
                  color: '#53E2FF', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: 'rgba(7,124,220,0)'
                }

              }
            }]
          },
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ['70%', '85%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                color: 'rgba(7,124,220,0.12)',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [100],
            z: 0
          }
        ]
      }
    },
    chartpie31 () {
      let data = this.popdata.piedata2[1]
      return {
        series: [
          {
            name: data.name,
            type: 'pie',
            clockWise: false,
            radius: ['70%', '85%'],
            itemStyle: {
              normal: {
                color: '#04C1FF',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data.value,
              label: {
                formatter: '{value|{c}%}',
                position: 'center',
                padding: [5, 0, 0, 0],
                show: true,
                textStyle: {
                  fontSize: 16,
                  color: '#53E2FF', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: 'rgba(7,124,220,0)'
                }

              }
            }]
          },
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ['70%', '85%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                color: 'rgba(7,124,220,0.12)',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [100],
            z: 0
          }
        ]
      }
    },
    chartpie32 () {
      let data = this.popdata.piedata2[2]
      return {
        series: [
          {
            name: data.name,
            type: 'pie',
            clockWise: false,
            radius: ['70%', '85%'],
            itemStyle: {
              normal: {
                color: '#46C88C',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data.value,
              label: {
                formatter: '{value|{c}%}',
                position: 'center',
                padding: [5, 0, 0, 0],
                show: true,
                textStyle: {
                  fontSize: 16,
                  color: '#53E2FF', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: 'rgba(7,124,220,0)'
                }

              }
            }]
          },
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ['70%', '85%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                color: 'rgba(7,124,220,0.12)',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [100],
            z: 0
          }
        ]
      }
    },
    chartpie33 () {
      let data = this.popdata.piedata2[3]
      return {
        series: [
          {
            name: data.name,
            type: 'pie',
            clockWise: false,
            radius: ['70%', '85%'],
            itemStyle: {
              normal: {
                color: '#FFB936',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data.value,
              label: {
                formatter: '{value|{c}%}',
                position: 'center',
                padding: [5, 0, 0, 0],
                show: true,
                textStyle: {
                  fontSize: 16,
                  color: '#53E2FF', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: 'rgba(7,124,220,0)'
                }

              }
            }]
          },
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ['70%', '85%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                color: 'rgba(7,124,220,0.12)',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [100],
            z: 0
          }
        ]
      }
    }
  },
  watch: {
    pointArr: {
      handler (newVal) {
        if (newVal.length > 0) {
          this.showMap = false
          this.$nextTick(() => {
            this.showMap = true
          })
        }
      },
      immediate: true,
      // 开启深度监听 deep
      deep: true
    },
    polygon: {
      handler (newVal, oldVal) {
        if (oldVal) {
          this.showMap = false
          this.$nextTick(() => {
            this.showMap = true
          })
        }
      },
      immediate: true,
      // 开启深度监听 deep
      deep: true
    }
  },
  methods: {
    // 渐进加载坐标数据
    renovateData () {
      // 初始化地图标点数据
      this.clearOverlays = {
        flag: true
      }
      this.pointArr = []
      this.hasNextPage = true
      this.pageNum = 0
      const interval = window.setInterval(() => {
        this.hasNextPage ? this.getData4() : window.clearInterval(interval)
      }, 1000)
    },
    // 获取地图对象
    getMapObj (mapObj) {
      this.initLine(mapObj)
    },
    // 飞线图
    initLine () {
      const myChart = echarts.init(this.$refs.bMapRef)
      myChart.setOption({
        bmap: {
          center: [120.244642, 29.271818],
          zoom: 5,
          roam: true
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          // 飞线数据
          {
            name: 'wha Top2',
            type: 'lines',
            coordinateSystem: 'bmap',
            zlevel: 2,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
              symbolSize: 15
            },
            lineStyle: {
              normal: {
                color: '#a6c84c',
                width: 1,
                opacity: 0.4,
                curveness: 0.2
              }
            },
            data: [{
              fromName: '吴宁一中',
              toName: '三单乡中小学(小学部)',
              coords: [[120.244642, 29.271818], [120.633874, 29.295942]]
            }]
          }
        ]
      })
    },
    // 获取颜色值
    getRandomColor () {
      const colorArr = ['#ECF9FF', '#FFB936', '#46C88C', '#09C8EB', '#92A7E5']
      if (this.colorIndex < (Number(colorArr.length) - 1)) {
        this.colorIndex++
      }
      return colorArr[this.colorIndex]
      // return '#' + ('00000' + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6)
    },
    // 判断数组array1中是否含有数组array2
    arrayHasElement (array1, array2) {
      for (const index1 in array1) {
        if (array1[index1].length === array2.length) {
          for (const index2 in array1[index1]) {
            if (array1[index1][index2].join() !== array2[index2].join()) {
              break
            }
            // 到最后一个元素都没有出现不相等，就说明这两个数组相等
            if (Number(index2) === (Number(array1[index1].length) - 1)) {
              return {
                identical: true,
                index: index1
              }
            }
          }
        }
      }
      return {
        identical: false,
        index: -1
      }
    },
    // 地图标点点击的回调
    onMarkerClick (pointObj) {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0004',
        data: {
          year: '2021',
          schoolId: pointObj.id
        }
      }).then((res) => {
        const result = res.result
        if (result.asMapRegion) {
          let tempObj = {
            id: pointObj.id,
            arr: []
          }
          // 转换坐标（高德转百度）
          for (const item of result.asMapRegion) {
            tempObj.arr.push(this.transform(item[0], item[1]))
          }
          // 添加到覆盖物数组内
          this.polygon = [tempObj]
          // 设置地图中心坐标
          this.centerPoint = {...pointObj}
        }
      })
    },
    // 高德转百度坐标
    transform (lng, lat) {
      let val = 3.14159265358979324 * 3000.0 / 180.0
      const z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * val)
      const theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * val)
      const bLng = z * Math.cos(theta) + 0.0065
      const bLat = z * Math.sin(theta) + 0.006
      return [bLng, bLat]
    },
    // 获取学位调剂各信息
    getData1 () {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0025',
        data: {
          year: this.localYear,
          areaCode: '330783',
          schoolCategory: this.schoolcontrol === null ? '' : this.schoolcontrol
        }
      }).then((res) => {
        const result = res.result
        this.luqudata = [ // 各类别录取率
          {name: 'A类', value: Number(result.stuEnrollGlblqlVO.alei) * 100, value2: 0},
          {name: 'B类', value: Number(result.stuEnrollGlblqlVO.blei) * 100, value2: 0},
          {name: 'C类', value: Number(result.stuEnrollGlblqlVO.clei) * 100, value2: 0}
        ]
        this.middata = {
          tiaoji: result.stuEnrollTjhzVO.dtjxx, // 待调剂学生数
          kongyu: result.stuEnrollTjhzVO.kyxw, // 空余学位
          tiaojidata: [ // 调剂数据对比
            {name: '小学', value: result.stuEnrollTjhzVO.xxtjrs, percent: 65, unit: '人'},
            {name: '中学', value: result.stuEnrollTjhzVO.zxtjrs, percent: 35, unit: '个'}
          ]
        }
        const tempArr = []
        if (result.xxtjxxList) {
          for (const item of result.xxtjxxList) {
            tempArr.push({
              from: item.fromSchoolName,
              fromSchoolId: item.fromSchoolId,
              to: item.toSchoolName,
              toSchoolId: item.toSchoolId,
              value: item.schoolTj
            })
          }
        }
        this.schooldata = tempArr
      })
    },
    // 获取学校详情数据
    getData2 (schoolId) {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0023',
        data: {
          year: this.localYear,
          schoolId: schoolId
        }
      }).then((res) => {
        this.$router.push({path: '/xuexiao', query: res.result})
      })
    },
    // 获取待调剂信息
    getData3 () {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0026',
        data: {
          year: this.localYear,
          areaCode: '330783',
          schoolCategory: this.schoolcontrol === null ? '' : this.schoolcontrol
        }
      }).then((res) => {
        const result = res.result
        const tempArr = []
        for (const item of result.list) {
          tempArr.push({
            name: item.schoolName,
            id: item.schoolId,
            city: item.streetName,
            value: item.schoolTj
          })
        }
        this.dtj = tempArr
      })
    },
    // 获取学校/学位地图信息
    getData4 () {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0003',
        data: {
          year: this.localYear,
          areaCode: '330783',
          schoolCategory: this.schoolcontrol === null ? '' : this.schoolcontrol,
          street: this.localcity,
          schoolName: this.searchtxt,
          pageNum: this.pageNum++,
          pageSize: 10
        }
      }).then((res) => {
        for (const item of res.result.list) {
          // 添加学校坐标
          this.pointArr.push({
            id: item.orgId,
            name: item.schoolName,
            imgColor: null,
            point: this.transform(Number(item.longitude), Number(item.latitude))
          })
        }
        this.hasNextPage = res.result.hasNextPage
        // 地图中心坐标
        this.centerPoint = this.pointArr[0]
        // this.centerPoint = {
        //   name: '东阳市人民政府',
        //   point: [120.248159, 29.296355]
        // }
      }).catch((err) => {
        console.log('err = ', err)
        this.hasNextPage = false
      })
    },
    // 页面底部按钮点击的回调
    onBottomClick (schoolCategory) {
      this.schoolcontrol = schoolCategory
      this.pointArr = []
      this.polygon = []
      this.colorIndex = -1
      this.getData1()
      this.renovateData()
    },
    // 学校预报名信息类别切换
    changeInfo (index) {
      this.xuexiaotype = index
    },
    // 学校详细信息
    showInfo (name) {
      this.viewinfo = !this.viewinfo
      this.schoolinfo.type = '公办'
      this.schoolinfo.name = name
      this.schoolinfo.address = '浙江省金华市东阳市吴宁街道某某某路123号'
      this.schoolinfo.moredata = [
        {name: '已录取人数', value: 1233},
        {name: '招生计划数', value: 2365},
        {name: '待调剂人数', value: 3652},
        {name: '空余学位数', value: 200}
      ]
      this.schoolinfo.data = [
        {name: '上官飘飘', type: 'A类', schoolname: '某某中心学校', content: '学区房'},
        {name: '李强', type: 'A类', schoolname: '某某中心学校', content: '学区房'},
        {name: '张林', type: 'A类', schoolname: '某某中心学校', content: '学区房'},
        {name: '孙琼', type: 'A类', schoolname: '某某中心学校', content: '学区房'},
        {name: '李明明', type: 'A类', schoolname: '某某中心学校', content: '学区房'},
        {name: '邓玲玲', type: 'A类', schoolname: '某某中心学校', content: '学区房'},
        {name: '张芳芳', type: 'A类', schoolname: '某某中心学校', content: '学区房'},
        {name: '李思思', type: 'A类', schoolname: '某某中心学校', content: '学区房'}
      ]
    },
    getBarOption (name) {
      if (this[name]) return this[name]
      return {}
    },
    array2obj (array, key) {
      var resObj = {}
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    },
    compare (key) {
      return function (value1, value2) {
        var val1 = value1[key]
        var val2 = value2[key]
        return val2 - val1
      }
    },
    // 统计时间选择的回调
    onSelectChange () {
      this.getData1()
      this.getData3()
    },
    // 年份列表初始化
    initYearList () {
      const tempArr = []
      let year = this.localYear
      let i = 5
      do {
        tempArr.push({
          label: year + '年', value: year
        })
        year = Number(year) - 1
        i--
      } while (i > 0)
      this.yearList = tempArr
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initYearList()
      this.getData1()
      this.getData3()
      this.renovateData()
      // this.getMapObj()
    })
  },
  created () {
  }
}
</script>

<style scoped lang="less">
.btn {
  background-color: #0D2246;
  color: #49C5E3;
  border-color: #0A58A0;
}

.sidebox-xwtj {
  width: 450px;
  height: 960px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}

.left-xwtj {
  position: absolute;
  top: 104px;
  left: 24px;
}

.right-xwtj {
  position: absolute;
  top: 104px;
  right: 24px;
}

.midbox-xwtj {
  flex: 1;
  margin: 0 24px;
  width: 940px;
  position: absolute;
  left: 475px;
  top: 110px;
  z-index: 2;

  .mapcontrolbox {
    display: flex;

    p {
      line-height: 36px;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0.84px;
      cursor: pointer;
      margin-left: 20px;

      &.normalbutton {
        line-height: 32px;
        font-size: 14px;
        color: #53E2FF;
        letter-spacing: 0.84px;
      }

      &.kuoban {
        width: 80px;
        height: 32px;
        background: url("../assets/img/page/kuoban0.svg") no-repeat left center;
        padding-left: 50px;

        &.kuoban1 {
          background: url("../assets/img/page/kouban1.svg") no-repeat left center;
        }
      }

      &.blue {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(14, 45, 80, 0.5);
          border: 1px solid rgba(52, 178, 255, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(14, 45, 80, 0.5);
            border: 1px solid rgba(52, 178, 255, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(52, 178, 255, 1)
          }
        }
      }

      &.green {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(2, 63, 34, 0.5);
          border: 1px solid rgba(0, 255, 61, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(2, 63, 34, 0.5);
            border: 1px solid rgba(0, 255, 61, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(0, 255, 61, 1)
          }
        }
      }

      &.lightblue {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(0, 255, 243, 0.24);
          border: 1px solid #00FFF3;
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(0, 255, 243, 0.24);
            border: 1px solid #00FFF3;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: #00FFF3
          }
        }
      }

      &.yellow {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(63, 46, 32, 0.5);
          border: 1px solid rgba(255, 185, 54, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(63, 46, 32, 0.5);
            border: 1px solid rgba(255, 185, 54, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(255, 185, 54, 1)
          }
        }
      }

      &.red {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(67, 0, 0, 0.5);
          border: 1px solid rgba(255, 0, 0, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(67, 0, 0, 0.5);
            border: 1px solid rgba(255, 0, 0, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(255, 0, 0, 1)
          }
        }
      }
    }
  }

  .mapbigbox {
    width: 100%;
    height: 32px;
    position: absolute;
    left: 0;
    bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      width: 100px;
      background: #0D2246;
      border: 1px solid rgba(7, 124, 220, 1);
      border-radius: 16px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;

      &:hover {
        border: 1px solid #53E2FF;
      }

      p {
        width: 32px;
        height: 32px;
        line-height: 27px;
        margin-left: 12px;
        margin-right: 12px;
        text-align: center;
        color: rgba(7, 124, 220, 1);
        font-size: 32px;
        font-weight: bold;
        cursor: pointer;

        &:hover {
          color: #53E2FF
        }
      }
    }
  }

  .schoolcontrolbox {
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
      width: 158px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: #53E2FF;
      letter-spacing: 0.96px;
      cursor: pointer;

      &.active {
        font-size: 16px;
        background-image: linear-gradient(to bottom, #fff, #B6EAFF);
        -webkit-background-clip: text;
        color: transparent;
        letter-spacing: 0.96px;
        font-weight: bold;
      }
    }

    &.school0 {
      background: url(../assets/img/page/school0.svg) no-repeat left bottom;
    }

    &.school1 {
      background: url(../assets/img/page/school1.svg) no-repeat left bottom;
    }

    &.school2 {
      background: url(../assets/img/page/school2.svg) no-repeat left bottom;
    }

  }

  .mapname {
    background: url("../assets/img/page/mapdot.svg") no-repeat left center;
    padding-left: 40px;

    p {
      line-height: 35px;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 1.2px;
      background-image: linear-gradient(to bottom, #fff, #B6EAFF);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

  .midtopbox {
    width: 100%;
    height: 104px;
    background-image: linear-gradient(180deg, rgba(7, 124, 220, 0.00) 0%, rgba(7, 124, 220, 0.24) 100%);

    .midtjbox1 {
      border-right: 1px solid rgba(255, 255, 255, 0.24);
      padding: 0 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .progressbox1 {
        height: 8px;
        background: rgba(7, 124, 220, .12);
        margin-right: 10px;
        margin-top: 5px;
        display: flex;

        .progresscurbox0 {
          height: 8px;
          background: url("../assets/img/page/picon1.png") repeat-x left top;
        }

        .progresscurbox1 {
          height: 8px;
          background: url("../assets/img/page/picon2.png") repeat-x left top;
        }
      }

      .tjlist {
        margin-top: 10px;

        &.tjlist0 {
          p {
            &:nth-child(1) {
              &:before {
                width: 8px;
                height: 8px;
                content: '';
                background: #46C88C;
                display: inline-block;
                margin-right: 10px;
                vertical-align: middle;
              }
            }
          }

        }

        &.tjlist1 {
          p {
            &:nth-child(1) {
              &:before {
                width: 8px;
                height: 8px;
                content: '';
                background: #FFB936;
                display: inline-block;
                margin-right: 10px;
                vertical-align: middle;
              }
            }
          }
        }
      }

      &.midtj0 {
        width: 300px;
        background: url("../assets/img/page/pdot1.svg") no-repeat left center;
        padding-left: 75px;
      }

      .midtopcontent {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }

    .midtopcontent {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}

.bottom-xwtj {
  flex: 1;
  width: 940px;
  margin: 0 24px;
  position: absolute;
  left: 475px;
  bottom: 10px;
  z-index: 2;

  .mapbigbox {
    width: 1500px;
    height: 32px;
    position: absolute;
    left: 0;
    bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      width: 100px;
      background: #0D2246;
      border: 1px solid rgba(7, 124, 220, 1);
      border-radius: 16px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;

      &:hover {
        border: 1px solid #53E2FF;
      }

      p {
        width: 32px;
        height: 32px;
        line-height: 27px;
        margin-left: 12px;
        margin-right: 12px;
        text-align: center;
        color: rgba(7, 124, 220, 1);
        font-size: 32px;
        font-weight: bold;
        cursor: pointer;

        &:hover {
          color: #53E2FF
        }
      }
    }
  }

  .schoolcontrolbox {
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
      width: 158px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: #53E2FF;
      letter-spacing: 0.96px;
      cursor: pointer;

      &.active {
        font-size: 16px;
        background-image: linear-gradient(to bottom, #fff, #B6EAFF);
        -webkit-background-clip: text;
        color: transparent;
        letter-spacing: 0.96px;
        font-weight: bold;
      }
    }

    &.school0 {
      background: url(../assets/img/page/school0.svg) no-repeat center bottom;
    }

    &.school1 {
      background: url(../assets/img/page/school1.svg) no-repeat center bottom;
    }

    &.school2 {
      background: url(../assets/img/page/school2.svg) no-repeat center bottom;
    }

  }

  .mapcontrolbox {
    display: flex;

    p {
      line-height: 36px;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0.84px;
      cursor: pointer;
      margin-right: 15px;

      &.blue {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(14, 45, 80, 0.5);
          border: 1px solid rgba(52, 178, 255, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(14, 45, 80, 0.5);
            border: 1px solid rgba(52, 178, 255, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(52, 178, 255, 1)
          }
        }
      }

      &.green {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(2, 63, 34, 0.5);
          border: 1px solid rgba(0, 255, 61, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(2, 63, 34, 0.5);
            border: 1px solid rgba(0, 255, 61, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(0, 255, 61, 1)
          }
        }
      }

      &.lightblue {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(0, 255, 243, 0.24);
          border: 1px solid #00FFF3;
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(0, 255, 243, 0.24);
            border: 1px solid #00FFF3;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: #00FFF3
          }
        }
      }

      &.yellow {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(63, 46, 32, 0.5);
          border: 1px solid rgba(255, 185, 54, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(63, 46, 32, 0.5);
            border: 1px solid rgba(255, 185, 54, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(255, 185, 54, 1)
          }
        }
      }

      &.red {
        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background: rgba(67, 0, 0, 0.5);
          border: 1px solid rgba(255, 0, 0, 1);
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

        &.active {
          &:before {
            content: '✔';
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(67, 0, 0, 0.5);
            border: 1px solid rgba(255, 0, 0, 1);
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
            color: rgba(255, 0, 0, 1)
          }
        }
      }
    }
  }

  .mapname {
    background: url("../assets/img/page/mapdot.svg") no-repeat left center;
    padding-left: 40px;

    p {
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 1.2px;
      background-image: linear-gradient(to bottom, #fff, #B6EAFF);
      -webkit-background-clip: text;
      color: transparent;
    }

  }

  .midtopbox {
    width: 100%;
    height: 104px;
    background-image: linear-gradient(180deg, rgba(7, 124, 220, 0.00) 0%, rgba(7, 124, 220, 0.24) 100%);

    .midtopcontent {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}

.container {
  position: relative;
  background: #020317;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &_top-xwtj {
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    height: 72px;
    background: url("../assets/img/page/titlebg.svg") no-repeat left top /100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .topleft {
      width: 516px;
      height: 40px;
      background: url("../assets/img/page/menu_4.svg") no-repeat left top /100% 100%;
      margin-left: 20px;
      display: flex;

      p {
        width: 138px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #53E2FF;
        letter-spacing: 0.96px;
        text-align: center;
        cursor: pointer;

        &.active {
          color: #B4F2FF;
          font-weight: bold;
        }
      }
    }

    .topright {
      width: 516px;
      margin-right: 20px;
      display: flex;
      justify-content: end;
      align-items: center;
    }

    p {
      flex: 1;
      font-size: 32px;
      letter-spacing: 1.92px;
      text-align: center;
      line-height: 72px;
      font-weight: 700;
      background-image: linear-gradient(to bottom, #fff, #B6EAFF);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

  &_body {
    height: 960px;
    padding: 24px;
    display: flex;
    position: relative;

    .infobox {
      width: 450px;
      position: absolute;
      top: 150px;
      left: 490px;
      z-index: 99999;

      &_top {
        width: 100%;
        height: 40px;
        background: url("../assets/img/page/popbg.svg") no-repeat left top;

        .infotitle {
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          color: #53E2FF;
          letter-spacing: 0.96px;
          font-weight: bold;

          &:before {
            width: 32px;
            height: 32px;
            content: '';
            display: inline-block;
            vertical-align: middle;
            padding-right: 15px;
            background: url(../assets/img/page/titleleft.svg) no-repeat left center;
            animation: cubeshow1 3s linear infinite forwards;
          }

          &:after {
            width: 32px;
            height: 32px;
            content: '';
            display: inline-block;
            vertical-align: middle;
            padding-left: 15px;
            background: url(../assets/img/page/titleright.svg) no-repeat right center;
            animation: cubeshow2 3s linear infinite forwards;
          }
        }
      }

      &_body {
        min-height: 300px;
        background: rgba(3, 46, 82, 0.80);
        padding: 20px;
      }

      &_bottom {
        width: 100%;
        height: 40px;
        background: url("../assets/img/page/popbg.svg") no-repeat left bottom;
        margin-top: -1px;
      }
    }

    .sidebox {
      width: 450px;
      height: 960px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 2;
    }

    .bmap {
      width: 1500px;
      height: 100%;
      position: absolute;
      left: 210px;
      top: 0;
      z-index: 1;
    }

    .normalbutton {
      width: 72px;
      height: 32px;
      line-height: 32px;
      background: #0D2246;
      border: 1px solid rgba(7, 124, 220, 1);
      border-radius: 4px;
      text-align: center;
      font-size: 14px;
      color: #53E2FF;
      letter-spacing: 0.84px;
    }
  }

  .popbox {
    width: 450px;
    height: 768px;
    background: url("../assets/img/page/popbg.svg") no-repeat left top;
    position: absolute;
    top: 220px;
    left: 600px;
    z-index: 99;

    &_content {
      height: 730px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .popboxtitle {
        line-height: 32px;
        font-size: 14px;
        color: #fff;
        letter-spacing: 0.84px;
      }

      .tjbox1 {
        width: 200px;
        height: 146px;
        background: url("../assets/img/page/tjbg1.svg") no-repeat left top;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        p {
          font-size: 14px;
          color: #fff;

          &.tjval {
            height: 70px;
            width: 100%;
            text-align: center;
            background: url("../assets/img/page/dotbottom.svg") no-repeat center bottom;
          }

          span {
            font-size: 20px;
            //color: #53E2FF;
            letter-spacing: 1.2px;
          }
        }
      }

      .tjbox2 {
        width: 100%;
        height: 40px;
        background: rgba(7, 124, 220, .12);
        border-top: 1px solid rgba(7, 124, 220, 0.24);
        border-bottom: 1px solid rgba(7, 124, 220, 0.24);
        position: relative;
        display: flex;

        &:before {
          content: '';
          width: 24px;
          height: 1px;
          position: absolute;
          left: 0;
          top: -1px;
          background: #077CDC;
        }

        &:after {
          content: '';
          width: 24px;
          height: 1px;
          position: absolute;
          right: 0;
          bottom: -1px;
          background: #077CDC;
        }

        p {
          line-height: 40px;
          font-size: 14px;
          color: #fff;
          padding-left: 10px;

          span {
            font-size: 20px;
            font-weight: bold;
            color: #53E2FF;
            letter-spacing: 0.8px;
          }

          b {
            font-size: 14px;
            font-weight: normal;
            color: #53E2FF;
          }
        }
      }
    }
  }
}

.poptitlebox {
  height: 64px;
  background: url("../assets/img/page/popdot1.svg") no-repeat left center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 75px;
  position: relative;

  .poptype {
    width: 46px;
    height: 20px;
    line-height: 20px;
    background: #F07700;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    margin-right: 15px;
  }

  .poptitle {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1.2px;
    background-image: linear-gradient(to bottom, #fff, #B6EAFF);
    -webkit-background-clip: text;
    color: transparent;
  }

  .topopinfo {
    font-size: 16px;
    color: #53E2FF;
    letter-spacing: 0.96px;
    position: absolute;
    right: 0;
    background: url("../assets/img/page/toinfo.svg") no-repeat right center;
    padding-left: 15px;
    padding-right: 20px;
    text-align: right;
  }
}

.subtitle {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: column;

  p {
    line-height: 50px;
    font-weight: bold;
    font-size: 16px;
    color: #53E2FF;
    letter-spacing: 0.96px;

    &:before {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-right: 15px;
      background: url(../assets/img/page/titleleft.svg) no-repeat left center;
      animation: cubeshow1 3s linear infinite forwards;
    }
  }
}

.maintitle {
  width: 100%;
  height: 32px;
  background: url("../assets/img/page/maintitle.svg") no-repeat left top;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  p {
    line-height: 32px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1.2px;
    background-image: linear-gradient(to bottom, #fff, #B6EAFF);
    -webkit-background-clip: text;
    color: transparent;

    &:before {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-right: 15px;
      background: url(../assets/img/page/titleleft.svg) no-repeat left center;
      animation: cubeshow1 3s linear infinite forwards;
    }

    &:after {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-left: 15px;
      background: url(../assets/img/page/titleright.svg) no-repeat right center;
      animation: cubeshow2 3s linear infinite forwards;
    }
  }
}

@keyframes cubeshow2 {
  0% {
    opacity: 0;
    transform: translateX(-10px);
    // transform: rotate(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
    // transform: rotate(0) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translateX(10px);
    //  transform: rotate(0) scale(1);
  }
}

@keyframes cubeshow1 {
  0% {
    opacity: 0;
    transform: translateX(10px);
    // transform: rotate(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
    // transform: rotate(0) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translateX(-10px);
    //  transform: rotate(0) scale(1);
  }
}

.mainbox {
  width: 100%;
  height: 190px;
  //background-image: linear-gradient(180deg, rgba(7, 124, 220, 0.00) 0%, rgba(7, 124, 220, 0.24) 100%);
  background-image: linear-gradient(to right, #113448, #091220);
  box-shadow: 0 0 7px 7px #113448;
  border-radius: 12px;

  &_content {
    padding: 0 16px;
  }
}

.listbox {
  width: 50%;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  &.listbox0 {
    background: url("../assets/img/page/pdot1.svg") no-repeat left center;
  }

  &.listbox1 {
    background: url("../assets/img/page/pdot2.svg") no-repeat left center;
  }

  &.listbox2 {
    background: url("../assets/img/page/pdot3.svg") no-repeat left center;
  }

  &.listbox3 {
    background: url("../assets/img/page/pdot5.svg") no-repeat left center;
  }

  &.listbox20 {
    background: url("../assets/img/page/pdot5.svg") no-repeat left center;
  }

  &.listbox21 {
    background: url("../assets/img/page/pdot1.svg") no-repeat left center;
  }

  &.listbox22 {
    background: url("../assets/img/page/pdot6.svg") no-repeat left center;
  }

  &.listbox23 {
    background: url("../assets/img/page/pdot9.svg") no-repeat left center;
  }

  p {
    margin-left: 85px;

    &.listval {
      line-height: 42px;
      font-size: 24px;
      color: #53E2FF;
      letter-spacing: 1.44px;
      font-weight: bold;
    }

    &.listname {
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0.84px;
    }
  }

}

.yzjzbox {
  width: 100%;
  margin: 0 auto;
  height: 190px;
  position: relative;

  p {
    text-align: center;
  }

  .yzjzcircle {
    width: 118px;
    height: 118px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /118px 118px;
    position: absolute;
    left: 39px;
    top: 30px;
    animation: rotate1 3s linear infinite forwards;
  }

  .yzjzcircle1 {
    width: 80px;
    height: 80px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /80px 80px;
    position: absolute;
    left: 27px;
    top: 25px;
    animation: rotate1 3s linear infinite forwards;
  }

  .yzjzcircle2 {
    width: 64px;
    height: 64px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /64px 64px;
    position: absolute;
    left: 20px;
    top: 14px;
    animation: rotate1 3s linear infinite forwards;
  }
}

.flexlist {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.normaltxt {
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 0.84px;

  span {
    font-size: 16px;
    letter-spacing: 0.96px;
    font-weight: bold;
    padding: 0 10px;

    &.keyyellow {
      color: #FFB936;
    }

    &.keygreen {
      color: #46C88C;
      font-size: 24px;
    }

    &.keyyellow2 {
      color: #FFB936;
      font-size: 24px;
    }

    &.keyarrow {
      background: url("../assets/img/page/dotinfo.svg") no-repeat right center;
    }

    &.lightblue2 {
      color: #53E2FF;
      font-size: 24px;
    }

    &.up {
      background: url("../assets/img/page/dotup.svg") no-repeat left center;
      padding-left: 20px;
    }

    &.keyblue {
      color: #53E2FF;
    }
  }
}

.xuexiaolistbox {
  flex: 1;
  height: 32px;
  line-height: 32px;
  background: #0D2246;
  border: 1px solid rgba(1, 66, 120, 1);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px 5px 0 5px;
  cursor: pointer;

  &.active {
    border: 1px solid rgba(83, 226, 255, 1);
  }

  p {
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
  }
}

.sortbox {
  width: 80%;
  margin: 0 auto;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;

  p {
    cursor: pointer;

    &:before {
      content: '';
      width: 16px;
      height: 16px;
      background: #0D2246;
      border: 1px solid rgba(7, 124, 220, 0.56);
      border-radius: 2px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }

    &.active:before {
      content: '✔';
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      color: #53E2FF;
      background: #0D2246;
      border: 1px solid rgba(83, 226, 255, 1);
      border-radius: 2px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
}

.flexbetween {
  display: flex;
  justify-content: space-between;
}

.flexbox {
  display: flex;
  align-items: center;
}

.flexwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.wrap-table {
  width: 100%;
  border-spacing: 0
}

.wrap-table table {
  width: 100%;
  table-layout: fixed;
}

.wrap-table.head tr th {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  background: rgba(7, 124, 220, .24);
}

.wrap-table.body tr {
  td {
    font-size: 14px;
    padding: 8px 2px;
    text-align: center;
    letter-spacing: 0.84px;
    color: rgba(255, 255, 255, .72);
    background: rgba(7, 124, 220, .12);

    .progressbox1 {
      width: 180px;
      height: 12px;
      background: rgba(7, 124, 220, .12);
      position: relative;
      margin-right: 10px;
      margin-top: 5px;

      .progresscurbox {
        height: 4px;
        position: absolute;
        left: 4px;
        top: 4px;
        background: rgba(4, 193, 255, 1);

        &.progress0 {
          background: #FFB936;
        }
      }
    }

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &.sortN0 {
        color: #FFB936;
        display: flex;
        justify-content: center;
        align-items: center;

        &:before {
          content: 'NO.';
          display: inline-block;
          vertical-align: middle;
        }
      }

      &.yellowkey {
        color: #FFB936;
      }
    }
  }

  &:nth-child(odd) {
    td {
      background: rgba(7, 124, 220, .04);
    }
  }

}

.wrap-table.body tr td.keyblue {
  font-size: 14px;
  color: #05D7FF;
  font-weight: 600;
}

@keyframes rotate1 {
  0% {
    transform: rotate(0) scale(1);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}

/*下拉框*/
/deep/ .el-input {
  font-size: 16px;
  color: #FFFFFF;
}

/deep/ .el-input__inner {
  background: #0D2246;
  border: 1px solid rgba(7, 124, 220, 1);
  border-radius: 4px;
  color: #53E2FF;
  font-size: 16px;

  &::-webkit-input-placeholder {
    color: #53E2FF;
  }
}

/deep/ .el-select-dropdown__item {
  color: #fff;
}

/deep/ .el-select:hover .el-input__inner {
  border-color: #6ABEFF
}

/deep/ .el-select-dropdown {
  background: rgba(3, 32, 64, 0.80);
  border: 1px solid rgba(61, 82, 103, 1);
  border-radius: 8px;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
}

/deep/ .el-popper .popper__arrow::after {
  border-width: 0;
}

/deep/ .el-popper[x-placement^=bottom] .popper__arrow {
  border-bottom-color: transparent;
}

/deep/ .el-select-dropdown__item.selected {
  background: rgba(106, 190, 255, 0.16);
  color: #6ABEFF;
  font-weight: normal;
}

/deep/ .el-select-dropdown__item.hover, /deep/ .el-select-dropdown__item:hover {
  background: rgba(106, 190, 255, 0.16);
}

/deep/ .el-radio {
  font-size: 16px;
  color: #53E2FF;
  letter-spacing: 0.96px;
}
</style>
